<template>
  <div class="header">
    <div class="logo">
      <div class="logo-img"></div>
    </div>
    <p class="description">Discover Blockchain</p>
  </div>
</template>

<script>
export default {
  name: 'v-header',
  data () {
    return {
      logoImg: ''
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.logo{
  width: 158px;
  height: 138px;
  margin: 0 auto 11px;
}
.description{
  font-size:24px;
  font-weight: bold;
  color:rgba(255,255,255,1);
  line-height:36px;
  text-align: center;
}
.logo-img{
  width: 100%;
  height: 100%;
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .logo-img
    background-image: url("../assets/images/logo@2x.png");
    background-size: cover;

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
  .logo-img
    background-image: url("../assets/images/logo@3x.png");
    background-size: cover;
</style>
